<template>
  <div>
    <!-- 推荐列表 -->
    <ul class="recommend_list">
      <li v-for="(item, index) in recommendList" :key="index" @click="http(item.url)">
        <div class="top">
          <div class="tg">推广</div>
          <!-- <img src="@/assets/img/rec_tit.png" alt /> -->
          <p class="text-cut-one">{{item.title}}</p>
        </div>
        <div class="cen">
          <div>
            <img class="w-100p" :src="item.thumb" alt />
          </div>
          <div class="tit">
            <p class="text-cut-four">{{item.content}}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    recommendList: {
      type: Array
    }
  },
  data() {
    return {};
  },
  methods: {
    http(path) {
      window.location.href = path;
    }
  }
};
</script>

<style scoped>
/* 推荐列表 */
.recommend_list {
  background-color: #fff;
  padding: 0.3rem 0.2rem 0.3rem 0.3rem
}
.recommend_list li {
  border-bottom: 1px dashed #ededed;
  padding: 0.2rem 0;
}
.recommend_list li:last-child {
  border-bottom: none;
}
.recommend_list .top {
  font-size: 0.3rem;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0.3rem;
}
.recommend_list .top img {
  display: block;
  width: 0.67rem;
  height: 0.31rem;
}
.recommend_list .top p {
  max-width: calc(100% - 0.9rem);
  margin-right: 0.2rem;
}
.recommend_list .cen {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.recommend_list .cen div:first-of-type {
  display: block;
  width: 1.73rem;
  height: 1.73rem;
}
.recommend_list .tit {
  margin-left: 0.2rem;
  flex: 1;
}
.recommend_list .tit p {
  font-size: 0.26rem;
  color: #333333;
  margin-bottom: 0.6em;
  line-height: 1.5em;
}
.recommend_list .tit dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #656565;
  font-size: 0.26rem;
}
.tg {
  padding: 3px 5px;
  letter-spacing: 1px;
  background-color: red;
  color: white;
  font-size: 0.2rem;
  margin-right: 0.24rem;
}
</style>
